/**
 * refactoring by zhouli on 2019/3/14.
 * 在线客服与反馈(左下角)
 */
import React from 'react';
import {connect} from 'react-redux';
import {message, Icon, Menu} from 'antd';
import {messages} from 'share/common';
import ServiceImg from 'images/service.png';
import FeedbackImg from 'images/feedback.png';
import mainService from 'containers/main.service';
import 'styles/main/components/online-service.scss';
import Feedback from 'containers/feedback/feedback';
import html2canvas from 'html2canvas';

const SubMenu = Menu.SubMenu;

class CustomerFeedBackOnlineService extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      onlineServiceUrl:"",
      feedbackModalVisible: false,
      screenShotUrl: '', //屏幕截图url
    }
  }

  componentDidMount() {
    this.onlineService();
  }

  onlineService = () => {
    //后端需要手机或者邮箱签名，不然就报错todo 下个迭代需要改这里，我封装了mainService.udeskSignature
    if (this.props.user.email || this.props.user.mobile) {
      mainService.udeskSignature(this.props.user, "1")
        .then((res) => {
          //在线客服
          // window.location.href = url;
          // window.open(url);//safari 不支持window.open,需要偏好设置
          this.setState({
            onlineServiceUrl: res.data._url
          })
        })
    } else {
      if (!sessionStorage.getItem("user_from_wechat")) {
        message.warn(messages('dashboard.key97'/*请设置邮箱或者手机号*/));
      }
    }
  };

  //截图反馈
  feedbackHandler = () => {
    //将当前html转换为canvas，然后获取url
    html2canvas(document.body, {allowTaint: true, logging: false})
      .then(canvas => {
        try { //有些浏览器不支持allowTaint:true（跨域获取图片），报错canvas被污染
          this.setState({
            screenShotUrl: canvas.toDataURL('image/jpeg', 1),
            feedbackModalVisible: true
          })
        } catch (e) {
          html2canvas(document.body, {allowTaint: false, logging: false})
            .then(newCanvas => {
              this.setState({
                screenShotUrl: newCanvas.toDataURL('image/jpeg', 1),
                feedbackModalVisible: true
              })
            })
        }
      })
  };

  closeFeeback = () => {
    this.setState({feedbackModalVisible: false})
  };

  renderCustomerService = () => {
    const { onlineServiceUrl } = this.state;
    const { user, collapsed } = this.props;
    // modify by mengsha.wang@huilianyi.com 需求3631 添加反馈按钮
    let onlyFeedback = (
      <div className="online-service">
        <a className="feedback-btn only-feedback" onClick={this.feedbackHandler}>
          <img src={FeedbackImg} style={collapsed ? {marginRight: 0} : {}}/> {!collapsed && messages('dashboard.key121')/*反馈*/}
        </a>
      </div>
    );
    if ((!onlineServiceUrl) || (user.language && user.language.toLowerCase() !== "zh_cn")) {
      return onlyFeedback
    }
    //bug 19236 非中文隐藏
    if (user.language && user.language.toLowerCase() !== "zh_cn") {
      return onlyFeedback
    }
    return (
      <div className="online-service">
        {
          collapsed ? (
          <Menu mode={"inline"} inlineCollapsed={true} theme={"dark"}>
            <SubMenu title={<Icon type="ellipsis" />} className='collapsed-menu'>
              <Menu.Item><a href={onlineServiceUrl}>{messages('dashboard.key98'/*客服*/)}</a></Menu.Item>
              <Menu.Item><a onClick={this.feedbackHandler}>{messages('dashboard.key121')/*反馈*/}</a></Menu.Item>
            </SubMenu>
          </Menu>
          ) : (
            <span>
              <a className="online-service-btn" href={onlineServiceUrl} target='_blank'>
                <img src={ServiceImg}/> {messages('dashboard.key98'/*客服*/)}
              </a>
              <span className="ant-divider"/>
              <a className="feedback-btn" onClick={this.feedbackHandler}>
                <img src={FeedbackImg}/> {messages('dashboard.key121')/*反馈*/}
              </a>
            </span>
          )
        }
      </div>
    );
  };

  render() {
    const { feedbackModalVisible, screenShotUrl } = this.state;
    return (
      <div>
        {/*在线客服*/}
        {this.renderCustomerService()}
        {/*在线截图反馈*/}
        {feedbackModalVisible && (
          <Feedback
            screenUrl={screenShotUrl}
            onClose={this.closeFeeback}
          />)}
      </div>
    )
  }
}

CustomerFeedBackOnlineService.propTypes = {
  collapsed: React.PropTypes.bool
};

CustomerFeedBackOnlineService.defaultProps = {};

CustomerFeedBackOnlineService.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
  }
}

export default connect(mapStateToProps)(CustomerFeedBackOnlineService);

